<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>过滤器单个参数测试</h3>
        <!-- 原始属性名 | 过滤器 -->
        <p>{{content | contentFilter}}</p>
        <input type="text" :value="content | contentFilter">
        <h3>过滤器多个参数测试</h3>
        <!-- 多参第一个参数在最左边 -->
        <p>{{xiaochen | add(xiaohei,xiaowang)}}</p>
        <input type="text" :value="xiaochen | add(xiaohei,xiaowang)">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //定义全局过滤器
        Vue.filter("contentFilter",(value)=>{
            if(!value){
                return "";
            }
            return value.toString().toUpperCase().replace("TMD","***").replace("SB","***");
        })
        new Vue({
            el:"#app",
            data:{
                content:"小伙子，你就tmd是个Sb",
                xiaochen:90,
                xiaohei:90,
                xiaowang:90,
            },
            filters:{
                contentFilter(value){
                    if(!value){
                    return "";
                }
                return value.toString().toUpperCase().replace("TMD","***").replace("SB","***");
                },
                add(num1,num2,num3){
                    return num1+num2+num3;
                }
            },
        })
    </script>
</body>
</html>